<style lang="less" scoped>
@import "../../assets/css/common.less";

#__layout > div > div {
  height: 100%;
}
.editor {
  height: calc(100vh - 50px);
  overflow: hidden;

  .level-one.left {
    width: 15%;
    float: left;
    border-right: 1px solid #e6e6e6;
    padding: 0 0;
    height: 100%;
    overflow-y: auto;
    .addType {
      margin: 20px 0 0;
      padding: 10px 20px;
      color: #000;
      display: block;

      &:hover {
        color: @ch;
      }
    }
    > p {
      background: @cf0;
      padding: 20px;
      input[type="text"] {
        height: 34px;
        line-height: 34px;
        display: block;
        width: 100%;
        border: 1px solid @c9;
        background: @cf0;
        outline: none;
        padding: 0 10px;
      }
      a {
        font-size: 12px;
        line-height: 12px;
        padding: 5px;
        color: #fff;
        background: @ch;
        border-radius: 2px;
        margin-top: 10px;
        display: inline-block;
      }
    }

    ul {
      padding: 20px 0 50px;

      li {
        a {
          padding: 10px 20px;
          display: block;
          color: @c1;
          &.active {
            background: @cf0;
          }
        }

        &:hover {
          a {
            background: @cf0;
          }
        }
      }
    }
  }

  .level-one.right {
    width: 85%;
    float: left;
    height: 100%;
  }

  .second-floor.left {
    height: 100%;
    overflow-y: auto;

    .btn {
      margin: 20px 0 0;
      padding: 10px 20px;
      color: #000;
      display: block;

      &:hover {
        color: @ch;
      }
    }

    width: 20%;
    float: left;

    ul {
      padding-bottom: 50px;

      li {
        a {
          padding: 10px 20px;
          display: block;
          color: @c1;
          &.active {
            background: @cf0;
          }
        }

        &:hover {
          a {
            background: @cf0;
          }
        }
      }
    }
  }

  .second-floor.right {
    width: 80%;
    float: left;
    height: 100%;
    position: relative;

    .h2 {
      padding: 20px;
      display: block;
      width: 100%;
      font-size: 30px;
      border: none;
      outline: none;
      background: @cf0;
    }
    > button {
      position: absolute;
      right: 20px;
      top: 20px;
      color: @cf;
      border-radius: 4px;
      background: @ch;
      padding: 10px 15px;
      border: none;
      cursor: pointer;
      outline: none;
    }
  }
}
</style>
<style>
#editor {
  height: calc(100vh - 178px);
}
#editor .w-e-text-container {
  height: 100% !important;
}
</style>



<template>
  <div>
    <Header />
    <div class="editor clearfix">
      <div class="level-one left">
        <a class="addType" href="javascript:;" @click="newType">新建目录</a>
        <p v-show="newTypeShow">
          <input id="newTypeInput" type="text" placeholder />
          <a class="querenbtn" href="javascript:;" @click="typeConfirm">确认</a>
          <a class="clearbtn" href="javascript:;" @click="typeClear">取消</a>
        </p>
        <ul>
          <li v-for="(item, index) in typeList" :key="index" @click="typeActiveIndex = index">
            <a href="javascript:;" :class="{active:typeActiveIndex === index}">{{item}}</a>
          </li>
        </ul>
      </div>
      <div class="level-one right">
        <div class="second-floor left">
          <a class="btn" href="javascript:;" @click="newTitle">新建标题</a>
          <ul>
            <li v-for="(item, index) in titleList" :key="index" @click="titleActiveIndex = index">
              <a href="javascript:;" :class="{active:titleActiveIndex === index}">{{item}}</a>
            </li>
          </ul>
        </div>
        <div class="second-floor right">
          <input id="contentTitle" class="h2" v-model="contentTitle" placeholder />
          <button id="btn2" @click="updatatext">上传文章</button>
          <div id="editor"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../../components/header.vue";
export default {
  components: {
    Header
  },
  data() {
    return {
      // 类型
      newTypeShow: false,
      typeList: [],
      typeActiveIndex: 0,

      // 标题
      titleList: [],
      titleActiveIndex: 0,

      // 内容
      contentTitle: "",

      mulus: [],
      biaotis: [],
      neirong: [],
      newbiaoti: "",
      leixingtext: "",
      newleixingbiaoti: "",
      newbiaotiinput: false,
      newbiaotibiaoti: "",
      biaotitext: "",
      article: {
        type: "",
        title: "",
        content: ""
      }
    };
  },
  head: {
    script: [
      {
        src: "/js/wangEditor.min.js"
      }
    ]
  },
  mounted: function() {
    this.$nextTick(function() {
      var E = window.wangEditor;
      var editor = new E("#editor");
      // 配置服务器端地址
      editor.customConfig.uploadImgServer = "/uploadImg";
      editor.create();
      window.editor = editor;
    });
  },
  methods: {
    // 创建类型
    newType() {
      // 显示input
      this.newTypeShow = true;
      setTimeout(() => {
        document.getElementById("newTypeInput").focus();
      });
    },

    // 类型确认并赋值
    typeConfirm() {
      // 赋值
      this.typeList.push(document.getElementById("newTypeInput").value);
      // 倒序排列
      this.typeList.reverse();
      // 隐藏input
      this.newTypeShow = false;
      // 清空input
      document.getElementById("newTypeInput").value = "";
    },

    // 类型取消
    typeClear() {
      // 隐藏input
      this.newTypeShow = false;
      // 清空input
      document.getElementById("newTypeInput").value = "";
    },

    //创建标题
    newTitle() {
      // 默认赋值（请输出标题！）
      this.titleList.push("请输出标题！");
      // 倒序排列
      this.titleList.reverse();
      // 内容标题光标显示
      document.getElementById("contentTitle").focus();
    },
    updatatext() {
      // 验证标题是否存在
      if (
        this.typeList[this.typeActiveIndex] === "" ||
        this.typeList[this.typeActiveIndex] === undefined
      ) {
        alert("类型不能为空！");
        return;
      }
      // 验证标题是否存在
      if (
        this.titleList[this.titleActiveIndex] === "" ||
        this.titleList[this.titleActiveIndex] === undefined
      ) {
        alert("标题不能为空！");
        return;
      }
      // 验证标题是否存在
      if (
        editor === undefined ||
        editor.txt == undefined ||
        editor.txt.html() == ""
      ) {
        alert("内容不能为空！");
        return;
      }
      // 数据插入
      this.article = {
        type: this.typeList[this.typeActiveIndex],
        title: this.titleList[this.titleActiveIndex],
        content: editor.txt.html()
      };
      console.log(this.article);
      // 向服务器传输数据
      this.$axios
        .post("/details/addArticle", this.article)
        .then(res => {
          window.location = "/editor/success";
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  watch: {
    // 标题改变
    contentTitle: function(newQuestion, oldQuestion) {
      this.titleList[this.titleActiveIndex] = newQuestion;
    }
  }
};
</script>

